<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas example</title>
	<script>

	
	window.onload=function()
	{
		var canvas=document.getElementById("mycanvas");
		var ctx = canvas.getContext("2d");
		ctx.strokeStyle='#ff0000';
		ctx.lineWidth=20;
		ctx.strokeRect(100,100,300,300);
		ctx.fillStyle='#f0aff0';
		ctx.fillRect(200,200,50,50);
		
		var color=new Array('#0000ff','#00ddd0','#ff00aa','#000000','#abcdef','#aaa000','#000bbb','#c00fcc','#ddffff');
		var j = 0;
		for(i=10;i<500;i=i+60)
		{
			ctx.fillStyle=color[j];
			ctx.fillRect(i,450,55,55);	
			j++;
		}
	
	
	}
	
	</script>

</head>
<body>
	<canvas id='mycanvas' width='600px' height='500px'></canvas>
</body>
</html>